<template>
  <div class="base-chart" ref="elChart"></div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {}
    },
  },
})

let chart = null
const elChart = ref(null)

watch(
  () => props.options,
  () => {
    initChart()
  },
  {
    deep: true,
  }
)

onMounted(() => {
  initChart()

  window.addEventListener('resize', () => {
    chart.resize()
  })
})

/**
 * 初始化图表
 */
const initChart = () => {
  chart = echarts.init(elChart.value)
  chart.setOption(props.options, true)
}
</script>

<style lang="scss" scoped></style>
